<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Othello</title>
        <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
        <script src="ajax.js"></script>
        <script type="text/javascript" >
            
            function iniciarjuego(x, y){
                cargar("tablero", "", "tablero.jsp?n="+x, "GET", "", true, "Cargando...");
                cargar2("id", "", "index.jsp?n="+x+"&funcion=crear_partida", "GET", "", true, "Cargando...");
                document.getElementById("turno").innerHTML="<img src='imagenes/azul.png'>"
                document.getElementById("win").innerHTML="";
            }
            //var id = document.getElementById("id").value;
            //cargar2("id", "", "index.jsp?n="+x+"&funcion=crear_partida&id="+id, "GET", "", true, "Cargando...");
            function puntos(x,y){
                cargar("", "", "index.jsp?x1="+x+"&y1="+y+"&funcion=jugar", "GET", "", true, "Cargando...");
                //cargar2("turno", "", "index.jsp?funcion=obtener_turno", "GET", "", true, "Cargando...");
                //cargar2("win", "", "index.jsp?funcion=final", "GET", "", true, "Cargando...");
            }
            
            function turno(){
                cargar2("turno", "", "index.jsp?funcion=obtener_turno", "GET", "", true, "Cargando...");
                cargar2("", "", "index.jsp?funcion=pasar", "GET", "", true, "Cargando...");
                cargar2("turno", "", "index.jsp?funcion=obtener_turno", "GET", "", true, "Cargando...");
            }
            
        </script>
    </head>
    <body>
        <div style="visibility: hidden" ><input id="id" ></input></div>
        <div id="wrapper">
            <div id="header">
                <div id="logo">
                    <h1><a href="#">Othello</a></h1>
                </div>
            </div>
            <!-- end #header -->
            <div id="menu">
            </div>
            <!-- end #menu -->
            <div id="page">
                <div id="page-bgtop">
                    <div id="page-bgbtm">
                        <div id="content">
                            <div class="post" id="tablero">
                            </div>
                            <div style="clear: both;">&nbsp;</div>
                        </div>
                        <!-- end #content -->
                        <div id="sidebar">
                            <ul>
                                <li>
                                    <h2>Configuración</h2>
                                    <ul>
                                        Tamaño del tablero
                                        <input id="x1" type="text" maxlength="2"></input>
                                        <button onclick="iniciarjuego(document.getElementById('x1').value,document.getElementById('x1').value);">Iniciar</button>
                                    </ul>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <h2>Turno</h2>
                                    <ul>
                                        <table>
                                            <tr>
                                                <td>
                                                    <div id="turno"> </div><div id="win"> </div>
                                                </td>
                                                <td>
                                                    <button onclick="turno()">Pasar Turno</button>
                                                </td>
                                            </tr>
                                        </table>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <!-- end #sidebar -->
                        <div style="clear: both;">&nbsp;</div>
                    </div>
                </div>
            </div>
            <!-- end #page -->
        </div>

    </body>
</html>